<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //文档未加载完毕
        console.log(document.getElementById("box"));
         window.onload=function(){//这里存放网页所有内容加载完毕执行内容
            // console.log(document.getElementById("box").tagName);//会大写
           //  console.log(document.getElementsByClassName("box")[0].innerText);
          //  console.log(document.getAnonymousElementByAttribute("div","title","t").innerText)
             var h=document.getElementById("divBox");
           //  console.log(h.bb);//undefined 除IE其他不支持
             console.log(h.getAttribute("bb"));//自定义全部兼容
             console.log(h.getAttribute("style"));
             console.log("===========");

             console.log(h.nodeName);//和tagName等价
             console.log(h.className);
             console.log(h.nodeType);
             console.log(h.nodeValue);
             console.log("===========");
             console.log(h.innerText);
             console.log(h.innerHTML);
             console.log(h.childNodes.length);
             console.log(h.childNodes[0].nodeValue);


             console.log("====")
             var elem=document.getElementById("box");
             console.log(elem.childNodes.length);
             console.log(elem.lastElementChild.innerText)//获取最后一个元素的内容
             console.log(elem.firstElementChild.innerText);
             console.log(elem.ownerDocument==document);//true
            console.log("-----节点关系  获取")
             console.log(elem.parentNode.nodeName);
             console.log(elem.nextElementSibling.nodeName);
             console.log(elem.previousElementSibling.nodeName);
            console.log(elem.attributes);

             console.log("-======节点操作")
             var n=document.createElement("p");
             n.innerText="ppppp";
             elem.appendChild(n);//添加到子节点之后
             elem.parentNode.insertBefore(n,elem);//添加在elem之前

        }


    </script>

</head>
<body>
    <div id="divBox" class="box" title="t" bb="12" style="color:red;">div1
        <span>sdas<em>ssss</em></span>
    </div>
    <div class="box">div2</div>
    <em>sdasd</em>
    <ul id="box">
        <li>11</li>
        <li>222</li>
        <li>33</li>
    </ul>
<span>saas</span>
</body>
</html>